<template>
  <div id="novel_head">
    <el-row type="flex" justify="space-between" align="middle">
      <el-col :span="4">
        <img src="@/assets/logo.png" @click="toSy" class="logo" />
      </el-col>
      <el-col :span="8">
        <el-autocomplete
          class="inline-input"
          :fetch-suggestions="querySearch"
          :trigger-on-focus="true"
          @select="handleSelect"
          placeholder="请输入内容"
          v-model="input"
          clearable
        >
          <template slot-scope="{ item }">
            <div class="name">
              {{ item.name }} <span>{{ item.typ }}</span>
            </div>
          </template>
          <el-button type="info" icon="el-icon-search" slot="append" plain
            >搜索</el-button
          >
        </el-autocomplete>
      </el-col>
      <!-- <el-col :span="5" :offset="3"> -->
      <el-col :span="3" :push="2">
        <el-button
          type="info"
          plain
          @click="bookCl"
          v-if="!user || user.type == 'USER'"
          >我的书 <i class="el-icon-s-management el-icon--right"></i>
        </el-button>
        <el-button
          type="info"
          plain
          @click="toWorks"
          v-if="user && user.type == 'WRITER'"
          >作品管理 <i class="el-icon-s-management el-icon--right"></i>
        </el-button>
      </el-col>
      <el-col :span="2" :push="0">
        <el-dropdown trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            <!-- <el-avatar icon="el-icon-user-solid"></el-avatar> -->

            <el-avatar
              v-if="user && user.headPortraitUrl"
              :size="55"
              :src="user.headPortraitUrl"
            ></el-avatar>
            <el-avatar v-else> user </el-avatar>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-plus" command="login" v-if="!user"
              >登录</el-dropdown-item
            >
            <el-dropdown-item
              icon="el-icon-d-arrow-left"
              command="loginOut"
              v-else
              >退出登录</el-dropdown-item
            >

            <el-dropdown-item icon="el-icon-setting" command="userPage"
              >用户设置</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
        <!--  -->
      </el-col>
    </el-row>
  </div>
</template>

<script>
//导入相关请求
import { getSuggest } from "@/api";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {
      user: window.sessionStorage.getItem("userInfo")
        ? JSON.parse(window.sessionStorage.getItem("userInfo"))
        : null,
      restaurants: [],
      input: "",
    };
  },
  computed: {
    // 获取vux的数据
    ...mapState("routeJump", ["refreshHead"]),
  },
  watch: {
    refreshHead: {
      deep: true, //不设置，a改变时watch无法检测到numbers改变
      handler(val, oldVal) {
        //刷新头
        this.user = window.sessionStorage.getItem("userInfo")
          ? JSON.parse(window.sessionStorage.getItem("userInfo"))
          : null;
        console.error("页面头刷新",this.user );
      },
    },
  },
  methods: {
    ...mapMutations("routeJump", ["WriterActive"]),
    toWorks() {
      this.WriterActive("1");
      this.$store.commit("routeJump/toWriterAction");
    },
    querySearch(queryString, cb) {
      console.log("用户输入", queryString);
      //可以在这里查询数据
      if (queryString) {
        getSuggest(queryString.trim())
          .then(({ data }) => {
            // 调用 callback 返回建议列表的数据
            cb(data.data);
          })
          .catch((error) => {});
      } else {
        cb(this.restaurants);
      }
    },
    handleSelect(item) {
      console.log(`选中了${item}`);
      alert(`预计跳转到${JSON.stringify(item)}`);
    },
    bookCl() {
      //打开书架
      this.$store.commit("routeJump/openBookrack");
    },
    handleCommand(command) {
      if (command == "login") {
        this.isLogin();
      } else if ("userPage" == command) {
        this.toUserPage();
      } else if ("loginOut" == command) {
        this.user = "";
        window.sessionStorage.setItem("userInfo", "");
      }
    },
    isLogin() {
      console.log("前往登录页面");
      this.$store.commit("routeJump/isLogin");
    },
    toUserPage() {
      this.$store.commit("routeJump/toUserPage");
    },
    toSy() {
      this.$router.replace({
        name: "main",
      });
    },
  },
  mounted() {
    getSuggest()
      .then(({ data }) => {
        this.restaurants(data.data);
      })
      .catch((error) => {});
  },
};
</script>

<style  scoped>
.logo {
  height: 50px;
}
.inline-input {
  width: 100%;
}
</style>